<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>番茄时钟音频生成器</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }
        .container {
            background: rgba(255, 255, 255, 0.95);
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
        }
        h1 {
            text-align: center;
            color: #4a5568;
            margin-bottom: 10px;
            font-size: 2.5em;
        }
        .subtitle {
            text-align: center;
            color: #718096;
            margin-bottom: 40px;
            font-size: 1.1em;
        }
        .sound-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .sound-card {
            background: #f8fafc;
            border: 2px solid #e2e8f0;
            border-radius: 15px;
            padding: 25px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .sound-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
            border-color: #4299e1;
        }
        .sound-card h3 {
            margin: 0 0 10px 0;
            color: #2d3748;
            font-size: 1.3em;
        }
        .sound-description {
            color: #718096;
            font-size: 0.9em;
            margin-bottom: 20px;
            line-height: 1.5;
        }
        .button-group {
            display: flex;
            gap: 10px;
        }
        button {
            flex: 1;
            padding: 12px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.9em;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }
        .preview-btn {
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            color: white;
        }
        .preview-btn:hover {
            background: linear-gradient(135deg, #ee5a24, #ff6b6b);
            transform: translateY(-2px);
        }
        .download-btn {
            background: linear-gradient(135deg, #4ecdc4, #44a08d);
            color: white;
        }
        .download-btn:hover {
            background: linear-gradient(135deg, #44a08d, #4ecdc4);
            transform: translateY(-2px);
        }
        .generate-all {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 15px 30px;
            font-size: 1.1em;
            border-radius: 10px;
            margin: 30px auto;
            display: block;
            min-width: 200px;
        }
        .generate-all:hover {
            background: linear-gradient(135deg, #764ba2, #667eea);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
        }
        .instructions {
            background: #e6fffa;
            border: 2px solid #81e6d9;
            border-radius: 10px;
            padding: 20px;
            margin-top: 30px;
        }
        .instructions h3 {
            color: #234e52;
            margin-top: 0;
        }
        .instructions ol {
            color: #2c7a7b;
            line-height: 1.6;
        }
        .status {
            text-align: center;
            margin: 20px 0;
            padding: 10px;
            border-radius: 8px;
            font-weight: 600;
        }
        .status.success {
            background: #c6f6d5;
            color: #22543d;
            border: 2px solid #9ae6b4;
        }
        .status.error {
            background: #fed7d7;
            color: #742a2a;
            border: 2px solid #fc8181;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🍅 番茄时钟音频生成器</h1>
        <p class="subtitle">为您的番茄时钟应用生成高质量的提示音文件</p>
        
        <div id="status" class="status" style="display: none;"></div>
        
        <div class="sound-grid">
            <div class="sound-card">
                <h3>🔔 Bell (铃声)</h3>
                <p class="sound-description">清脆的铃声，经典的提醒音效，适合工作完成时的提醒</p>
                <div class="button-group">
                    <button class="preview-btn" onclick="previewSound('bell')">🎵 试听</button>
                    <button class="download-btn" onclick="downloadSound('bell')">💾 下载</button>
                </div>
            </div>
            
            <div class="sound-card">
                <h3>🎵 Chime (钟声)</h3>
                <p class="sound-description">温和的钟声，和谐的音调，适合休息开始时的温柔提醒</p>
                <div class="button-group">
                    <button class="preview-btn" onclick="previewSound('chime')">🎵 试听</button>
                    <button class="download-btn" onclick="downloadSound('chime')">💾 下载</button>
                </div>
            </div>
            
            <div class="sound-card">
                <h3>✨ Ding (叮声)</h3>
                <p class="sound-description">轻快的叮声，简洁明快，适合短休息结束时的提醒</p>
                <div class="button-group">
                    <button class="preview-btn" onclick="previewSound('ding')">🎵 试听</button>
                    <button class="download-btn" onclick="downloadSound('ding')">💾 下载</button>
                </div>
            </div>
            
            <div class="sound-card">
                <h3>📢 Notification (通知音)</h3>
                <p class="sound-description">现代化通知音，科技感十足，适合各种提醒场景</p>
                <div class="button-group">
                    <button class="preview-btn" onclick="previewSound('notification')">🎵 试听</button>
                    <button class="download-btn" onclick="downloadSound('notification')">💾 下载</button>
                </div>
            </div>
            
            <div class="sound-card">
                <h3>🌟 Gentle (温和音)</h3>
                <p class="sound-description">非常温和的提示音，不会打断专注状态，适合需要安静环境的用户</p>
                <div class="button-group">
                    <button class="preview-btn" onclick="previewSound('gentle')">🎵 试听</button>
                    <button class="download-btn" onclick="downloadSound('gentle')">💾 下载</button>
                </div>
            </div>
            
            <div class="sound-card">
                <h3>⚡ Success (成功音)</h3>
                <p class="sound-description">积极的成功提示音，增强成就感，适合长休息结束或目标达成</p>
                <div class="button-group">
                    <button class="preview-btn" onclick="previewSound('success')">🎵 试听</button>
                    <button class="download-btn" onclick="downloadSound('success')">💾 下载</button>
                </div>
            </div>
        </div>
        
        <button class="generate-all" onclick="generateAllFiles()">
            🎼 一键生成所有音频文件
        </button>
        
        <div class="instructions">
            <h3>📋 使用说明</h3>
            <ol>
                <li>点击"试听"按钮可以预览每种音效</li>
                <li>点击"下载"按钮可以单独下载某个音效文件</li>
                <li>点击"一键生成所有音频文件"可以批量下载所有音效</li>
                <li>下载的文件为WAV格式，请将它们转换为MP3格式</li>
                <li>将转换后的MP3文件放入 <code>assets/sounds/</code> 目录中</li>
                <li>确保文件名与原有文件名一致（bell.mp3, chime.mp3, ding.mp3, notification.mp3, gentle.mp3, success.mp3）</li>
            </ol>
        </div>
    </div>

    <script src="create_audio_files.js"></script>
    <script>
        function showStatus(message, type = 'success') {
            const status = document.getElementById('status');
            status.textContent = message;
            status.className = `status ${type}`;
            status.style.display = 'block';
            
            setTimeout(() => {
                status.style.display = 'none';
            }, 3000);
        }
        
        function previewSound(soundType) {
            try {
                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
                const config = audioConfigs[soundType];
                
                if (!config) {
                    showStatus(`未找到音效配置: ${soundType}`, 'error');
                    return;
                }
                
                const buffer = generateAudioBuffer(audioContext, config);
                const source = audioContext.createBufferSource();
                source.buffer = buffer;
                source.connect(audioContext.destination);
                source.start();
                
                showStatus(`正在播放: ${soundType}`, 'success');
            } catch (error) {
                console.error('Preview error:', error);
                showStatus(`播放失败: ${error.message}`, 'error');
            }
        }
        
        function downloadSound(soundType) {
            try {
                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
                const config = audioConfigs[soundType];
                
                if (!config) {
                    showStatus(`未找到音效配置: ${soundType}`, 'error');
                    return;
                }
                
                const buffer = generateAudioBuffer(audioContext, config);
                const wavData = audioBufferToWav(buffer);
                downloadAudio(wavData, `${soundType}.wav`);
                
                showStatus(`已下载: ${soundType}.wav`, 'success');
            } catch (error) {
                console.error('Download error:', error);
                showStatus(`下载失败: ${error.message}`, 'error');
            }
        }
        
        async function generateAllFiles() {
            try {
                showStatus('正在生成所有音频文件...', 'success');
                await generateAllAudioFiles();
                showStatus('所有音频文件已生成完成！', 'success');
            } catch (error) {
                console.error('Generate all error:', error);
                showStatus(`生成失败: ${error.message}`, 'error');
            }
        }
    </script>
</body>
</html>
